<template>
    <div class="float-cart" @click="handleClick">
        <el-badge :value="count" class="badge" type="warning">
            <div class="cart-icon">
                <el-icon :size="28"><ShoppingCart /></el-icon>
            </div>
        </el-badge>
    </div>
</template>

<script>
import { ShoppingCart } from '@element-plus/icons-vue'
import {useRouter} from "vue-router";

export default {
    components: { ShoppingCart },
    props: {
        count: {
            type: Number,
            default: 0
        }
    },
    setup(props, { emit }) {
        const router = useRouter() // 创建 router 实例
        const handleClick = () => {
            emit('click')
            router.push('/cart')
        }

        return {
            handleClick
        }
    }
}
</script>

<style scoped>
.float-cart {
    position: fixed;
    right: 30px;
    bottom: 80px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(255, 0, 54, 0.3);
    z-index: 1000;
    transition: all 0.3s;
}

.float-cart:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(255, 0, 54, 0.4);
}

.cart-icon {
    color: white;
}

.badge :deep(.el-badge__content) {
    top: 5px;
    right: 5px;
    font-weight: bold;
}
</style>